<template>
	<view class="more">
		<view class="header">
			<view class="out">
				<u-icon name="arrow-left" size="25" @click="goout"></u-icon>
			</view>
			<view class="class-list">课程列表</view>
		</view>
		<!-- 详情部分 -->
		<view class="zx-list"   v-for="(item,index) in list" :key="index">
			<view class="box-list" >
				<view class="img-list">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="pic-list">
							<view class="pic-list1">{{item.title}}</view>
							<view class="pic-list2">
						     <span class='sp1'>￥{{item.price}}</span>
							<span class='sp2'>￥{{item.t_price}}</span>
							</view>
						</view>
			</view>
					</view>
	</view>
</template>

<script>
	import {getmore} from '@/utils/api.js'
	export default{
		data(){
			return{
				list:[], // 存放数据
			query:{
				page:1,
				limit:10
			},
			total:0,   //总页数
			isloading:false,
			}
		},
		
		onLoad(){
			this.getlist()
		},
		
		methods:{
		async  getlist(cd){
			this.isloading = true
	     var res =  await getmore(this.query) 
		    this.isloading = false
			cd && cd()
		 console.log(11111,res);
		 this.list = [...this.list,...res.data.rows]
		 this.total = res.data.count
		  }	,
		  
		  // 点击退出
		  goout(){
            uni.navigateBack({
            	url:'/pages/index/index'
            })
		  }
		},
		//下拉刷新
		 onPullDownRefresh() {
		 	console.log('下拉刷新了');
			this.query.page = 1   //页数等于1
			this.total=0,
			this.isloading = false
			this.list = []
			this.getlist(()=> uni.stopPullDownRefresh())
		 },
		 
		 //上拉加载
		 onReachBottom() {
		 	console.log('触底了');
			if(this.query.page<this.total){
				this.query.page++
				this.getlist()
			}else{
				uni.showToast({
					title:'到底了'
				})
			}
		 }
		
	}
</script>

<style lang="less">
	.more{
		.header{
			width: 100%;
			height: 100rpx;
				line-height: 100rpx;
			display: flex;
			flex-direction: row;
			.out{
				flex: 1;
				padding-left: 20rpx;
				padding-top: 27rpx;
			}
			.class-list{
				flex: 3;
				font-size: 38rpx;
				font-weight: 600;
				margin-left: 120rpx;
			}
		}
		.box{
			width: 100%;
			height: 240rpx;
			background-color: pink;
			display: flex;
			justify-content: center;
			align-items: center;
			.box1{
				width: 95%;
				height: 90%;
				background-color: #ccc;
				display: flex;
				flex-direction: row;
				.img{
					flex: 4;
					background-color: aquamarine;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.pic-title{
					flex: 5;
					background-color: blueviolet;
				}
			}
		}
		.zx-list{
			width: 100%;
			height: 230rpx;
			display: flex;
		    justify-content: center;
			align-items: center;
			.box-list{
		      width: 94%;
			  height: 185rpx;
			  display: flex;
			}
			.img-list{
				flex: 0.8;
				image{
				width: 100%;
				height: 100%;
				}
			}
			.pic-list{
				flex: 1;
				 display: flex;
				 flex-direction: column;
				.pic-list1{
					flex: 0.8;
				    box-sizing: border-box;
					color: black;
					font-size:30rpx;
					padding: 10rpx;
					// overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
					//       white-space: nowrap;//（设置文字在一行显示，不能换行）
					//       text-overflow: ellipsis;//（规定当文本溢出时，显示省略符号来代表被修剪的文本）	
				
				}
				.pic-list2{
					flex: 1;
					line-height: 140rpx;
					// background-color:red;
					.sp1{
						font-size: 30rpx;
						color: #dc3545;
					}
					.sp2{
						font-size: 20rpx;
						color: #ccc;
					}
				}
			}
		}
		
	}
</style>